<template>
  <view class="outBox">
    <u-navbar leftText="订单详情" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '订单详情' }}</text>
      </view>
    </u-navbar>

    <view class="bgBox"></view>
    <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop
           object-fit="cover"></video>
    <view class="innerBox">
      <view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
        <view class="items">
          <view class="item" v-for="item in dataList" :style="{
              backgroundImage:`url(${bg})`
            }">
            <image :src="item.relaPicPath" mode=""></image>
            <view class="info">
              <view class="title">
                <text>{{ item.relaName }}</text>
              </view>
              <view class="price">
                <text>¥ {{ item.unitPrice }}</text>
                <view class="operation">
                  <!-- 			<u-icon name="minus-circle" color="#f96f45" v-if="item.choiceNum > 0"
                    @click="handleDecrease(item)"></u-icon> -->
                  <text>数量：{{ item.orderNum }}</text>
                  <!-- 			<u-icon name="plus-circle" color="#f96f45" size="22"
                    @click="handleIncrease(item)"></u-icon> -->
                </view>
              </view>
            </view>
          </view>

        </view>

        <view class="inputOut">
          <view class="inputBox">
            <view class="label">
              <text>备注</text>
            </view>
            <view class="value">
              <u--input placeholder="请输入备注" border="surround" v-model="remark" color="#fff" inputAlign="right"
                        type="textarea"></u--input>
            </view>
          </view>
          <view class="inputBox">
            <view class="label">
              <text>桌号</text>
            </view>
            <view class="value">
              <text>{{ counterNo }}</text>
            </view>
          </view>
        </view>

      </view>
      <view class="footer">
        <view class="left">
          <view class="price">
            <text>¥ {{ getCartInfo().price }}</text>
          </view>
        </view>
        <view class="btnOut">
          <view class="btn" @click="handleSuc">
            <text>去结算</text>
          </view>
        </view>
      </view>
    </view>
    <diaBox ref="diaBoxRef" title="下单成功" content="请等待服务员确认并结算" @comfireFunc="handleBack" :show-btns="true" :show-cancel="false"/>
  </view>
</template>

<script>
import {
  getWXStatusHeight
} from '@/utils/index.js'

import {addCounterOrderFlowDetailForWx,findMyCartForWxApi} from '../../api/api'
import bg from "@/static/mine/bg2.png";
import diaBox from "@/components/diaBox/index.vue";

export default {
  components: {diaBox},
  data() {
    return {
      // 胶囊的宽度
      barWidth: 0,
      menuHeight: 0,
      dataList: [],
      videoUrl: this.$videoUrl,
      remark: '', //备注
      counterNo: "", // 坐号
      bg: bg,
	  sendMsgObj:"",
	  realList:[], // 包含套餐的数据
    }
  },
  onLoad(e) {
    let obj = getWXStatusHeight()
    this.barWidth = obj.barWidth + 3
    this.menuHeight = obj.menuHeight
    // this.dataList = uni.getStorageSync("choiceDataList")

    if (e.counterNo) {
      this.counterNo = e.counterNo
    }

	this.sendMsgObj = uni.getStorageSync("sendMsgObj")
	this.findMyCartForWx()
  },
  methods: {
	  async findMyCartForWx(){
		const res = await findMyCartForWxApi(this.sendMsgObj)
		if(res.code == 200){
			// 包含套餐数据
			this.realList = res.data.counterOrderFlowDetailList
			// 真实数据
			this.dataList = res.data.counterOrderFlowDetailList.filter(item => item.serviceId == -1)
		}
	  },
    handleBack() {
      this.$refs.diaBoxRef.close()
      uni.navigateBack()
    },
    // 获取购物车信息
    getCartInfo() {
      const obj = {
        num: 0,
        price: 0
      }
      this.dataList.forEach(item => {
        obj.num += item.orderNum
        obj.price += item.orderNum * item.unitPrice
      })
      return obj
    },
    // 支付
    async handleSuc() {
      const data = {
        counterOrderFlowDetailList: this.dataList.map(item => {
          return {
            relaType: item.relaType,
            relaId: item.relaId,
            orderNum: item.orderNum,
            unitPrice: item.unitPrice,
          }
        }),
        counterNo: this.counterNo //卡台编号
      }
      const res = await addCounterOrderFlowDetailForWx(data)
      if (res.code == 200) {
        uni.removeStorageSync("choiceDataList")
        // this.$toast("下单成功")
        this.$refs.diaBoxRef.show = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.inputOut {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 60rpx;
  border: 2rpx solid #273232;
  backdrop-filter: blur(7px);
}

.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

.innerBox {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 180rpx;
  padding: 0 46rpx;
  position: relative;
  z-index: 9;
  background: rgba(0, 0, 0, 0.6);
  border-image: linear-gradient(164deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16)) 2 2;

  .left {
    display: flex;

    .price {
      font-size: 36rpx;
      margin-left: 50rpx;
      display: flex;
      align-items: center;

      text {
        font-weight: 500;
        font-size: 41rpx;
        color: #FFFFFF;
        line-height: 59rpx;
        text-align: left;
        font-style: normal;
      }
    }

    .cart {
      position: relative;

      .circle {
        position: absolute;
        right: 0;
        top: 0;
        width: 26rpx;
        height: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        text {
          font-size: 18rpx;
          color: #fff;
        }
      }
    }

    image {
      width: 76rpx;
    }
  }

  .btnOut {
    border-radius: 64rpx;
    box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
  }

  .btn {
    width: 212rpx;
    height: 80rpx;
    box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
    border-radius: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2bafad;

    text {
      font-size: 32rpx;
      color: #fff;
    }
  }
}

.inputBox {
  padding: 20px 45rpx;
  border-bottom: 1rpx solid #19241e;
  display: flex;
  align-items: center;

  .label {
    width: 100rpx;

    text {
      color: #B3B4C3;
      font-size: 28rpx;
    }
  }

  .value {
    flex: 1;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    font-weight: 500;
    font-size: 28rpx;
    line-height: 28rpx;
    text-align: right;
    font-style: normal;
  }
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.operation {
  display: flex;

  text {
    align-items: center;
    color: #fff;
    text-align: center;
  }
}

.items {
  margin-bottom: 20rpx;
  margin-top: 38rpx;

  .item {
    padding: 30rpx;
    margin-bottom: 18rpx;
    display: flex;
    background-size: 100% 100%;

    image {
      width: 120rpx;
      height: 120rpx;
      margin-right: 20rpx;
      border-radius: 20rpx;
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10rpx 0;
      margin-left: 36rpx;

      .title {
        font-size: 36rpx;
        color: #fff;
      }

      .price {
        font-weight: 500;
        font-size: 28rpx;
        color: #0FC6C2;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
        display: flex;
        justify-content: space-between;

        image {
          width: 36rpx;
          margin: 0 !important;
        }
      }
    }
  }
}

.content {
  position: relative;
  z-index: 99;
  flex: 1;
  box-sizing: border-box;
  padding: 0 32rpx;
}

.left-slot {
  color: #fff;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    margin-right: 30rpx;
  }
}

.outBox {
  background-color: #242331;
}
</style>
